
<template>
  <div>
    <div class="title">世界疫情地图</div>
    <!-- 地图容器 -->
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <van-tabs v-model="active" animated @change="change">
      <van-tab title="现存确诊">
        <div id="nowWorldMain" style="width: 7.5rem; height: 7rem"></div>
      </van-tab>
      <van-tab title="累计确诊">
        <div id="worldMain" style="width: 7.5rem; height: 7rem"></div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import {getWorldData} from '../../../api/base';
export default {
  name: 'WorldMap',
  data(){
    return {
      active:0,
      arr:[]
    }
  },
  mounted() {
    getWorldData().then(res=>{
      // console.log(res.data);
       //获取省份数据
      let world = res.data.retdata;
      // let arr = [];//累计
      let nowArr = [];//现存
      for(let i=0 ; i<world.length ; i++){
        let obj = {};
        let now = {};
        obj.name = world[i].xArea;
        obj.value = world[i].confirm;//该地区累计确诊人数
        this.arr.push(obj);
        now.name = world[i].xArea;
        now.value = world[i].curConfirm;//该地区现存确诊人数
        nowArr.push(now);
      }
      //等待延迟加载
      this.$nextTick(()=>{
      //显示现存地图
      this.$myChart.worldMap('#nowWorldMain',nowArr);
      });
    }).catch(err=>{
      console.error('国外疫情数据出错：',err);
      this.$myChart.worldMap('#nowWorldMain',[]);
    })
  },
  methods: {
      change(title) {
      if (title == 1) {
        this.$nextTick(() => {
          //显示累计地图
          this.$myChart.worldMap("#worldMain", this.arr);
        });
      }
    },
  }
}
</script>

<style scoped>
.title {
  margin: 0.2rem;
  padding-top: 0.2rem;
    border-top: 1px solid #eee;
}
.title::before {
    content: "";
    border-left: 0.1rem solid rgb(9, 60, 202);
    font-size: 0.26rem;
    margin-right: 0.1rem;
  }
#main,#nowMain{
  background: #f5f5f5;
}
</style>

